<!DOCTYPE html>
<html lang='en' class=''>

<head>

    <meta charset='UTF-8'>
    <title>CodePen Demo</title>

    <meta name="robots" content="noindex">

    <!-- <link rel="shortcut icon" type="image/x-icon"
        href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
    <link rel="mask-icon" type=""
        href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
        color="#111">
    <link rel="canonical" href="https://codepen.io/jenniferperrin/pen/xfwab"> -->



    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

    <style class="INLINE_PEN_STYLESHEET_ID">

        /* =================== */
        /* @import url(//fonts.googleapis.com/css?family=Open+Sans); */
        /* cyrillic-ext */
        @font-face {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
            unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
        }

        /* cyrillic */
        @font-face {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
            unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
        }

        /* greek-ext */
        @font-face {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
            unicode-range: U+1F00-1FFF;
        }

        /* greek */
        @font-face {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
            unicode-range: U+0370-03FF;
        }

        /* vietnamese */
        @font-face {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
            unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
        }

        /* latin-ext */
        @font-face {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
            unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }

        /* latin */
        @font-face {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }

        /* =================== */

        body {
            margin: 5px 20px;
            background-image: url("");
            font-family: 'Open Sans';
            font-weight: 300;
        }

        h2 {
            margin-bottom: 30px;
            color: #4679bd;
            font-weight: 400;
            text-align: center;
        }

        p.footer {
            margin-bottom: 20px;
            color: #999999;
            font-size: 18px;
            text-align: center;
        }

        /* -----------------------------------------------
 * Timeline
 * --------------------------------------------- */
        .timeline {
            list-style: none;
            padding: 10px 0;
            position: relative;
            font-weight: 300;
        }

        .timeline:before {
            top: 0;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 2px;
            background: #ffffff;
            left: 50%;
            margin-left: -1.5px;
        }

        .timeline>li {
            margin-bottom: 20px;
            position: relative;
            width: 50%;
            float: left;
            clear: left;
        }

        .timeline>li:before,
        .timeline>li:after {
            content: " ";
            display: table;
        }

        .timeline>li:after {
            clear: both;
        }

        .timeline>li:before,
        .timeline>li:after {
            content: " ";
            display: table;
        }

        .timeline>li:after {
            clear: both;
        }

        .timeline>li>.timeline-panel {
            width: calc(100% - 25px);
            width: -moz-calc(100% - 25px);
            width: -webkit-calc(100% - 25px);
            float: left;
            border: 1px solid #dcdcdc;
            background: #ffffff;
            position: relative;
        }

        .timeline>li>.timeline-panel:before {
            position: absolute;
            top: 26px;
            right: -15px;
            display: inline-block;
            border-top: 15px solid transparent;
            border-left: 15px solid #dcdcdc;
            border-right: 0 solid #dcdcdc;
            border-bottom: 15px solid transparent;
            content: " ";
        }

        .timeline>li>.timeline-panel:after {
            position: absolute;
            top: 27px;
            right: -14px;
            display: inline-block;
            border-top: 14px solid transparent;
            border-left: 14px solid #ffffff;
            border-right: 0 solid #ffffff;
            border-bottom: 14px solid transparent;
            content: " ";
        }

        .timeline>li>.timeline-badge {
            color: #ffffff;
            width: 24px;
            height: 24px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            top: 16px;
            right: -12px;
            z-index: 100;
        }

        .timeline>li.timeline-inverted>.timeline-panel {
            float: right;
        }

        .timeline>li.timeline-inverted>.timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        .timeline>li.timeline-inverted>.timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }

        .timeline-badge>a {
            color: #ffffff !important;
        }

        .timeline-badge a:hover {
            color: #dcdcdc !important;
        }

        .timeline-title {
            margin-top: 0;
            color: inherit;
        }

        .timeline-heading h4 {
            font-weight: 400;
            padding: 0 15px;
            color: #4679bd;
        }

        .timeline-body>p,
        .timeline-body>ul {
            padding: 10px 15px;
            margin-bottom: 0;
        }

        .timeline-footer {
            padding: 5px 15px;
            background-color: #f4f4f4;
        }

        .timeline-footer p {
            margin-bottom: 0;
        }

        .timeline-footer>a {
            cursor: pointer;
            text-decoration: none;
        }

        .timeline>li.timeline-inverted {
            float: right;
            clear: right;
        }

        .timeline>li:nth-child(2) {
            margin-top: 60px;
        }

        .timeline>li.timeline-inverted>.timeline-badge {
            left: -12px;
        }

        .no-float {
            float: none !important;
        }

        @media (max-width: 767px) {
            ul.timeline:before {
                left: 40px;
            }

            ul.timeline>li {
                margin-bottom: 0px;
                position: relative;
                width: 100%;
                float: left;
                clear: left;
            }

            ul.timeline>li>.timeline-panel {
                width: calc(100% - 65px);
                width: -moz-calc(100% - 65px);
                width: -webkit-calc(100% - 65px);
            }

            ul.timeline>li>.timeline-badge {
                left: 28px;
                margin-left: 0;
                top: 16px;
            }

            ul.timeline>li>.timeline-panel {
                float: right;
            }

            ul.timeline>li>.timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            ul.timeline>li>.timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }

            .timeline>li.timeline-inverted {
                float: left;
                clear: left;
                margin-top: 30px;
                margin-bottom: 30px;
            }

            .timeline>li.timeline-inverted>.timeline-badge {
                left: 28px;
            }
        }
    </style>


    <!-- <script
        src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js"></script>
    <script
        src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
    <script
        src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script> -->
</head>

<body>
    <h2>Super Simple Bootstrap Responsive Timeline</h2>

    <ul class="timeline">
        <li>
            <div class="timeline-badge">
                <a><i class="fa fa-circle" id=""></i></a>
            </div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4>Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis
                        causet. Dicens hoc contra serpentibus isto.</p>
                </div>
                <div class="timeline-footer">
                    <p class="text-right">Feb-21-2014</p>
                </div>
            </div>
        </li>

        <li class="timeline-inverted">
            <div class="timeline-badge">
                <a><i class="fa fa-circle invert" id=""></i></a>
            </div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4>Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Stranguillione in deinde cepit roseo commendavit patris super color est se sed. Virginis plus
                        plorantes abscederem assignato ipsum ait regem Ardalio nos filiae Hellenicus mihi cum. Theophilo
                        litore in lucem in modo invenit quasi nomen magni ergo est se est Apollonius, habet clementiae
                        venit ad nomine sed dominum depressit filia navem.</p>
                </div>
                <div class="timeline-footer">
                    <p class="text-right">Feb-23-2014</p>
                </div>
            </div>
        </li>

        <li>
            <div class="timeline-badge">
                <a><i class="fa fa-circle" id=""></i></a>
            </div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4>Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.</p>
                </div>
                <div class="timeline-footer">
                    <p class="text-right">Feb-23-2014</p>
                </div>
            </div>
        </li>

        <li class="timeline-inverted">
            <div class="timeline-badge">
                <a><i class="fa fa-circle invert" id=""></i></a>
            </div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4>Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Volvitur ingreditur id ait mea vero cum autem quod ait Cumque ego illum vero cum unde beata.
                        Commendavi si non dum est in. Dionysiadem tuos ratio puella ut casus, tunc lacrimas effunditis
                        magister cives Tharsis. Puellae addita verbaque' capellam sanctissima quid, apollinem existimas
                        filiam rex cum autem quod tamen adnuente rediens eam est se in. Peracta licet ad nomine Maria
                        non ait in modo compungi mulierem volutpat.</p>
                </div>
                <div class="timeline-footer">
                    <p class="text-right">Feb-27-2014</p>
                </div>
            </div>
        </li>

        <li>
            <div class="timeline-badge">
                <a><i class="fa fa-circle" id=""></i></a>
            </div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4>Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Adfertur guttae sapientiae ducitur est Apollonius ut a a his domino Lycoridem in lucem. Theophile
                        atque bona dei cenam veniebant est cum. Iusto opes mihi Tyrum in modo compungi mulierem ubi
                        augue eiusdem ordo quos vero diam omni catervis famulorum. Bene dictis ut diem finito servis
                        unde.</p>
                </div>
                <div class="timeline-footer">
                    <p class="text-right">Mar-01-2014</p>
                </div>
            </div>
        </li>

        <li class="timeline-inverted">
            <div class="timeline-badge">
                <a><i class="fa fa-circle invert" id=""></i></a>
            </div>
            <div class="timeline-panel">
                <div class="timeline-heading">
                    <h4>Timeline Event</h4>
                </div>
                <div class="timeline-body">
                    <p>Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello
                        lenonem in deinde plectrum anni ipsa quod eam est Apollonius.</p>
                </div>
                <div class="timeline-footer primary">
                    <p class="text-right">Mar-02-2014</p>
                </div>
            </div>
        </li>
        <li class="clearfix no-float"></li>
    </ul>

    <p class="footer">Icons by <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome 4.1 Icons</a>.<br />
        Created by <a href="http://jenniferperrin.com">Jennifer Perrin</a>
    </p>

    <!-- <script
        src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-6c2419e5-b366-ff6b-3f1b-c62f59e47b00"
        crossorigin></script> -->
</body>

</html>